<script setup>
import { ref } from 'vue';
import Vmodel from './components/Vmodel.vue'

const msg = ref('你好世界')
const count = ref(0)
</script>

<template>
  <div class="box">
    {{ msg }} {{ count }}
    <!-- 
      v-model 都是一个双向绑定简化的语法糖
      简化了一个数据绑定, 加一个事件监听的写法

      在vue3当中有三种情况
      1. input 之类原生使用 v-model 就是绑定 :value 数据 + 监听 @input 事件
      2. 自定义组件使用 v-model 就是绑定 :modelValue + 监听 @update:modelValue 事件
      3. 自定义事件的自定义v-model:abc 就是绑定 :abc + 监听 @update:abc 事件

      其中对于自定义组件来说, 因为事件名和属性名都是固定, 所以在封装子组件的时候要注意对应
    -->
    <!-- <Vmodel :modelValue="msg" @update:modelValue="changeMsg" /> -->
    <!-- 匿名默认用法, 具名用法 -->
    <Vmodel v-model="msg" v-model:count="count" />
  </div>
</template>

<style lang="scss">
.box {
  padding: 10px;
  margin: 10px;
  border: 1px solid salmon;
}
</style>
